<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>

  <div class="Back">
    <a th:href="@{/productForm(productId=${product.productId})}" class="BackLink">
      <i class="fa-solid fa-circle-left"></i>
      Return to
      <span th:text="${product.name}"></span>
    </a>
  </div>

  <div style="display: flex;flex-direction: column;margin: 0 30%">
  <table valign="middle"
         style="border-top: 5px solid rgb(245 153 162);border-bottom: 5px solid rgb(245 153 162);padding: 20px;background: #F2CF8C;border-radius: 30px">
    <tr>
      <td rowspan="3" colspan="2" style="text-align: center" width="200px">
        <img th:src="${product.description.substring(14, product.description.indexOf('>')-1)}" class="CategoryImgLink">
      </td>
      <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px">
        <b th:text="${item.itemId}"></b>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px">
        <b th:text="${product.name}"></b>
      </td>
    </tr>
    <tr th:if="${item.quantity}>10000">
      <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px">
        <b th:text="${item.quantity}"> in stock.</b>
      </td>
    </tr>
    <tr th:if="${item.quantity}<=10000">
      <span th:if="${item.quantity}>1000">
        <td colspan="2" style="text-align: center;background:rgb(255, 255, 255);border-radius: 10px">
          <b th:text="${item.quantity}"> in stock.</b>
        </td>
      </span>
    </tr>
    <tr th:if="${item.quantity}<=1000">
      <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px;border: 100px solid #000000">
        <b th:text="${item.quantity}"> in stock.</b>
      </td>
    </tr>

    <tr>
      <td colspan="4" style="text-align: center">
        <b>
          <span th:text="${item.attribute1}"></span>
          <span th:text="${item.attribute2}"></span>
          <span th:text="${item.attribute3}"></span>
          <span th:text="${item.attribute4}"></span>
          <span th:text="${item.attribute5}"></span>
          <span th:text="${item.product.name}"></span>
        </b>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;font-size: 50px;color: #ff0000;background: rgb(255, 255, 255);border-radius: 100px">
        <b>
          <fmt:formatNumber th:text="'$'+${item.listPrice}" pattern="$#,##0.00" />
        </b>
      </td>
      <td colspan="2" style="text-align: center">
        <div class="ButtonDiv">
          <a th:href="@{/addItemCart(workingItemId=${item.itemId})}" class="Button">
            <i class="fa-solid fa-cart-shopping"></i>Add to Cart
          </a>
        </div>
      </td>
    </tr>
  </table>

  </div>

<div th:replace="common/bottom"></div>
</body>
</html>